@import "base/index.scss";
@import "comptents/top.scss";
@import "comptents/search.scss";
@import "comptents/logoSearch.scss";
@import "comptents/nav.scss";
@import "comptents/bread.scss";
@import "comptents/layout.scss";
@import "comptents/title.scss";
@import "comptents/list.scss";

.keep {
  position: absolute;
  right: 0;
  top: 0;
  color:#ffaa45;
  cursor: pointer;
  .iconfont {
    color:#ffaa45;
  }
}

.detail-swiperBox  .palyBox { padding: 87px 0;}
.detail-swiperBox  .palyBox .paybt {
  float: left;
  width: 18px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}
 .palyBox {
   .pay {
       background: url("../img/play/play.png");
       background-size: contain;
       float: left;
       width: 42px;
       height: 42px;
       cursor: pointer;
    }
   .pause {
     background-size: contain;
     float: left;
     width: 42px;
     height: 42px;
     cursor: pointer;
     background-image: url("../img/play/pause.png");
   }
   .timeBox {
        float: left;
        font-size: 16px;
        margin-left: 16px;
        padding-top: 10px;
   }
   .longTime{
     width: 278px;
     height: 8px;
     background-color: #e6e6e6;
     margin-top: 18px;
     margin-left: 9px;
     float: left;
     border-radius: 4px;
     .progress {
       width:0%;
       background-color:#ff9f2d;
       position:relative;
       height: 100%;
       border-radius: 4px;
     }
     .point {
       width: 15px;
       height: 15px;
       background: url("../img/write/dot.png");
       position: absolute;
       right: -7px;
       top:-3px;
     }
   }
 }




.detail-book {
   .cover {
      position: relative;
      margin-bottom: 40px;
     .img {
        float: left;
        width: 228px;
        height: 300px;
        @include imgBox();
     }
     .info {
        float: left;
        width: 552px;
        padding-left: 20px;
        padding-top: 10px;
        .space{
           display: inline-block;
           width: 330px;
        }
        .name {
          font-size: 22px;
          margin-bottom: 25px;

        }
        .author {
          margin-bottom: 15px;
          font-size: 16px;
          color: $secFont;
        }
        .data{
          margin-bottom: 15px;
          font-size: 16px;
          color: $secFont;
        }
        .pub {
          margin-bottom: 15px;
          font-size: 16px;
          color: $secFont;
        }
        .classify {
          margin-bottom: 30px;
          font-size: 16px;
          color: $secFont;
        }
        .qkbutton {
           position: absolute;
           left:250px;
           bottom: 22px;
        }
        .qkdec {
         max-height: 163px;
         overflow: hidden;
        }
     }
   }
   .dec {
      margin-bottom: 40px;
      .title{
          height: 43px;
          width: 100%;
          margin-bottom: 12px;
      }
      .p {
          text-indent: 2em;
          line-height: 2;
      }
    }
    .audio {
         margin-bottom: 35px;
        .title{
          height: 43px;
          width: 100%;
        }
       .list{
         .item {
             height: 60px;
             line-height: 60px;
             border-bottom: 1px dashed #e6e6e6;
             padding-left: 40px;
             cursor: pointer;
             background: url("../img/bg/pay.png") no-repeat 15px 23px;
             &.active{
               background: url("../img/bg/pay-a.png") no-repeat 15px 20px;
             }
             .text{
                 width: 750px;
                @include textOver();
             }
             .date{
               float: right;
             }
         }
       }
    }
}

.mdqk6{
  padding-top: 30px;
  .item {
    float: left;
    width: 130px;
    height: 367px;
    margin: 0 35px;
    .bookImg {
      width: 100%;
      height: 172px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 22px;
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
    .data {
      text-align: center;
      color:$secFont;
    }
  }
}

.mdqk5{
  padding-top: 30px;
  .item {
    float: left;
    width: 192px;
    height: 238px;
    margin: 0 24px;
    .bookImg {
      width: 100%;
      height: 143px;
      background-size: cover;
      background-repeat: no-repeat;
      margin-bottom: 22px;
    }
    .name {
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
      @include textOver();
    }
    .data {
      text-align: center;
      color:$secFont;
    }
  }
}


.video {
  .videoPlay{
      width: 840px;
      height: 492px;
      background: #000;
      margin-bottom: 30px;
  }
  .title{
     position: relative;
     font-size: 22px;
     color:#1a1a1a;
     margin-bottom: 22px;
     .control {
       position: absolute;
       right: 0;
       top:2px;
       font-size: 14px;
       color:#ff9f2d;
       label{
         margin-left: 15px;
         cursor: pointer;
       }
       .iconfont {
         font-size: 15px;
         color:#ff9f2d;
       }
     }
  }
  .title-2 {
     margin-bottom: 20px;
     font-size: 14px;
     color:$secFont;
  }
  .dec {
    color:$secFont;
  }
}


.videoMore {
  float: left;
  width: 100%;
  .title{
    height: 53px;
    width: 100%;

  }
}


.payerTag {
  .title{
     width: 100%;
     height: 22px;
     margin-bottom: 26px;
  }
  overflow: hidden;
  .tag{
    float: left;
    color: #ff9f2d;
    background: #fef8ec;
    padding:10px 14px;
    border-radius: 6px;
    margin-right: 10px;
    margin-bottom: 8px;
  }

}

.bookIframeWrap {
   height: 800px;
}
